import {FlatList, View} from 'react-native';
import {LinearGradient, ObserverText, ObserverView} from '../../components';
import {useState} from 'react';
import {dpw10, dpw12, dpw48} from '../../constants';
import Shelf from './Shelf';
import {useGlobalStore} from '../../mobx';

const list = [{Id: 'top'}, {Id: 'con'}];

const titles = [
  {
    id: 1,
    tKey: 'cartoon',
    type: 'titles',
  },
  {
    id: 2,
    tKey: 'store',
    type: 'titles',
  },
  {
    id: 3,
    tKey: 'video',
    type: 'titles',
  },
];

const StickyHeader = (props: any) => {
  const {typeId, setTypeId} = props;
  const {changeToastKey} = useGlobalStore();

  return (
    <ObserverView
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
      <View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
        {titles.map(it => (
          <View key={it.id}>
            <ObserverText
              isActive={typeId === it.id}
              style={{
                paddingHorizontal: dpw12,
                paddingVertical: dpw10,
                zIndex: 2,
              }}
              tKey={it.tKey}
              type="titles"
              tOptions={{num: 0}}
              onPress={() => {
                if (it.id === 1 && it.id !== typeId) {
                  setTypeId(it.id);
                } else {
                  changeToastKey('construction');
                }
              }}
            />
            {typeId === it.id && (
              <LinearGradient
                direction="left-right"
                style={{
                  width: dpw12,
                  height: dpw12,
                  borderRadius: dpw48,
                  position: 'absolute',
                  top: dpw12,
                  right: dpw10,
                  zIndex: 1,
                }}
                themeColors={['color_2', 'color_1']}
              />
            )}
          </View>
        ))}
      </View>
      {/* <ObserverText
        style={{paddingHorizontal: dpw12, paddingVertical: dpw10}}
        tKey={'edit' || 'finish'}
        type="primary"
      /> */}
    </ObserverView>
  );
};

const Bookshelf = (props: any) => {
  const {navigation} = props;
  const [typeId, setTypeId] = useState(titles[0].id);

  const _randItem = ({item}: any) => {
    if (item.Id === 'top') {
      return <StickyHeader typeId={typeId} setTypeId={setTypeId} />;
    }
    return <Shelf navigation={navigation} typeId={typeId} />;
  };

  return (
    <ObserverView style={{flex: 1}}>
      <FlatList
        data={list}
        renderItem={_randItem}
        keyExtractor={item => `${item.Id}`}
        scrollEventThrottle={16}
        onEndReachedThreshold={0.1}
        stickyHeaderIndices={[0]}
      />
    </ObserverView>
  );
};

export default Bookshelf;
